<template>
  <s-layout title="Ai综合市场" navbar="inner" color="#000000" :is_back="true"
            :customBody="customBody()"
            :bgStyle="{
              color:'#F5F5F5'
            }"
  >
    <view class="w-100 flex flex-column align-center flex-sub">
      <s-block :styles="listStyle()"></s-block>
      <view class="searchs">
        <s-search-block
          :data="{
             placeholder: state.keyword,
              borderRadius: '58rpx',
            }"
          :inputStyle="inputStyle()"
          bgColor="#FFFFFF"
          text-color="#000000"
          :radius="upx2px(58)"
          elBackground="#FFFFFF"
          :height="upx2px(80)"
          :width="'702rpx'"
          :navbar="false"
          :is_go="false"
          @search="search"
        ></s-search-block>
      </view>
      <s-block :styles="listStyle(25)"></s-block>
      <template1 class="w-100 flex flex-column align-center flex-sub" :searchFocusFlag="true"
                 :all_ai_list="state.all_ai_list"></template1>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import { onLoad, onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import Template1 from '@/pages/AI/template/template1.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {
    },
  });
  const state = reactive({
    all_ai_list: [],
    keyword: '',
  });
  const template = computed(() => sheep.$store('app').template?.home);

  const upx2px = (upx) => {
    return uni.upx2px(upx);
  };

  const listStyle = (top = 10) => {
    return {
      marginTop: uni.upx2px(top),
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      'border-top-left-radius': 0,
      'border-top-right-radius': 0,
      'border-bottom-left-radius': 0,
      'border-bottom-right-radius': 0,
      padding: 0,
      overflow: 'hidden',
      background: {
        type: 'color',
        bgColor: '#F6F6F6',
      },
    };
  };

  const inputStyle = () => {
    return {
      color: '#FFFFFF',
    };
  };

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };

  onLoad(async (options) => {
    state.keyword = options.keyword;
    await search(options.keyword);
  });

  const search = async (keyword) => {
    state.keyword = keyword;
    const { data } = await sheep.$api.AI.getLabelUsers({
      searchContent: keyword,
    });
    let arr = [];
    for (let i = 0; i < data.labels.length; i++) {
      if (data.labels[i].users.length > 0) {
        arr.push(data.labels[i]);
      }
    }
    state.all_ai_list = arr;
  };

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {
  });
</script>

<style></style>
